<template>
  <!--  应用案例页面-->
  <div class="page">
    <div class="page_main">
      <div style="margin-bottom: 20px;">
        <el-button
          size="small"
          class="common_btn-small"
          icon="el-icon-plus"
          @click="websiteAdd()"
        >
          新增版本
        </el-button>

      </div>
      <el-table stripe :data="dataList" border style="width: 100%;">
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{ getIndex(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="versionName" min-width="70" show-overflow-tooltip
                         label="版本名"></el-table-column>
        <el-table-column align="center" prop="versionCode" min-width="70" show-overflow-tooltip
                         label="版本号"></el-table-column>
        <el-table-column align="center" prop="remark" min-width="70" show-overflow-tooltip
                         label="备注
"></el-table-column>
        <el-table-column prop="fileList" min-width="180" show-overflow-tooltip label="下载地址">
          <template slot-scope="scope">
            {{scope.row.fileList[0].url}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template slot-scope="scope">
            <button type="text"
                    class="btn_add"
                    @click.stop="handleEdit(scope.row,)" style="margin-right: 10px">
              修改
            </button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑菜单-->
    <el-dialog :title=dialogTitle :visible.sync="isShowDialog1" :close-on-click-modal="false" width="820px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="140px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="版本名：" prop="versionName">
              <el-input v-model.trim="currentRow.versionName" placeholder="输入版本名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号：" prop="versionCode">
              <el-input v-model.trim="currentRow.versionCode" placeholder="输入版本号"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="currentRow.remark " type="textarea" :autosize="4"
                    style="min-height: 100px"></el-input>
        </el-form-item>
        <el-form-item label="上传案例apk文件：" prop="fileList" style="width: 100%!important;">
          <upload-file v-model="currentRow.fileList" ref="uploadClear"></upload-file>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
           <el-button class="common_btn-white" @click="isShowDialog1 = false">取消</el-button>
        <el-button type="primary" class=" common_btn-defalut1" @click="validateForm"
                   style="background:#1990FE">提 交
        </el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
  import constUrl from '@/services/env'
  import {
    apkQueryList,
    apkUpdate,
    apkAdd,

  } from '@/services/model/sys'
  import {uploadUrl} from '@/services/model/common'
  import Format from '@/utils/format'
  import UploadFile from '@/components/upload-file'
  // form表单校验规则
  const RULES = {
    versionCode: {required: true, message: '请输入版本号'},
    versionName: {required: true, message: '请输入版本名'},
  };
  export default {
    components: {UploadFile},
    data() {
      return {
        fileList: [],
        uploadStreamUrl: uploadUrl,

        currentRow: {},
        form: {
          page: 1,
          total:1,
          pageSize: 10,
        },
        childList: [],//table数据
        editableTabsValue: 0, //tab默认展示
        constUrl,
        type: 1,
        //是否启用
        //菜单类型
        parentId: '',
        EnumWebTypeList: [],
        dataList: [],
        monitorSortList: [],
        isShowDialog1: false,
        isShowDialog2: false,
        form3: {richText: ''},
        rules: RULES,
        // 接口获取 打开方式
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.form3.id ? '编辑版本' : '新增版本'
      },

    },
    methods: {
      beforeUpload(file) { // 上传前 文件校验
        this.files = file
        this.fileName = file.name
        return false // 返回false不会自动上传
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1;
        return param;
      },
      // 新增菜单按钮
      websiteAdd() {
        this.isShowDialog1 = true
        this.currentRow={}
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
          this.$refs.uploadClear.clears()

        })
      },
      // 修改 按钮
      handleEdit(item) {
        this.isShowDialog1 = true
        if (this.$refs.uploadClear) {
          this.$refs.uploadClear.clears()
        }
        this.currentRow = JSON.parse(JSON.stringify(item))
        this.$nextTick(() => {

        })
      },
      // 表单提交
      validateForm() {
        this.$refs.form.validate((valid) => {
          valid && this.submitData()
        })
      },
      // 新增编辑提交数据
      async submitData() {
        // 根据ID判断使用新增还是编辑

        const AJAX_ACTION = this.currentRow.id ? apkUpdate : apkAdd
        await AJAX_ACTION(this.currentRow)
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '编辑成功' : '添加成功'
        })
        this.isShowDialog1 = false
        this.isShowDialog2 = false
        this.queryList()

      },
      async queryList() {
        const {data} = await apkQueryList(this.form)

          this.dataList = data?.records || []
          this.form.size = Number(data?.size)
          this.form.total = Number(data?.total)

      }
    },
    mounted() {
      this.queryList()
    },
  }
</script>
<style lang="less">


</style>
<style scoped lang="less">
  .page {
    height: 100%;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .caseBox {
    width: 100%;
    text-align: center;
    margin-top: 2vh;
    overflow: auto;

    .ql-editor {
      width: 100%;
      overflow-y: auto;
      box-sizing: border-box;
    }
  }


  /*修改富文本编辑器样式*/
  /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
    height: 80%;
    overflow-y: hidden;
  }

  /deep/ .el-textarea, /deep/ .el-textarea__inner {
    min-height: 100px !important;
  }

  /*修改表单样式*/
  .demo-drawer__content {
    height: 85vh;
    overflow-y: auto;

    /deep/ .el-form {
      width: 80%;
      margin: auto;
      overflow-y: auto;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 50px;
      text-align: left
    }


  }
</style>
